import { Component, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { getStaffInfo } from '@/api/system'
import type { StaffDto } from '@/api/system/types'
import { JobStatusCnEnum, StaffInWorkStatusCnEnum } from '@/const/enum'
import { Image, Tag } from 'ant-design-vue'
import { ManOutlined, WomanOutlined } from '@ant-design/icons-vue'

@Component
export class StaffBaicInfo extends Render {
    @Prop() userId!: number

    staffInfo = {} as StaffDto

    @Watch('userId', { immediate: true})
    handleWatchUserId() {
        this.getData()
    }

    async getData() {
        const res = await getStaffInfo({
            userId: this.userId
        })
        this.staffInfo = res
    }

    render() {
        return (
            <div class="flex items-center">
                <Image class="!w-56px !h-56px mr-16px" src={this.staffInfo.avatar}></Image>
                <div>
                    <div class="flex items-center">
                        <div class="text-lg font-bold">{this.staffInfo.nickName}</div>
                        {this.staffInfo.sex === '0' ? (
                            <ManOutlined />
                        ) : (
                            <WomanOutlined />
                        )}
                        <Tag
                            class="ml-5px"
                            color={this.staffInfo.status === '0' ? 'processing' : 'error'}
                        >
                            { JobStatusCnEnum[this.staffInfo.status as keyof typeof JobStatusCnEnum]}
                        </Tag>
                    </div>
                    <div class="flex items-center mt-4px">
                        <span class="text-gray-default mr-5px">{this.staffInfo.phonenumber}</span>
                        <span>{this.staffInfo.dept?.deptName}</span>
                    </div>
                </div>
            </div>
        )
    }
}

export default toNative<{ userId: number }, {}>(StaffBaicInfo)
